<template>
	<view class="lucky-wheel flex-r" v-if="showWheel">
		<LuckyWheel
			ref="luckyWheel"
			:width="width"
			:height="height"
			:blocks="blocks"
			:prizes="prizes"
			:default-config="defaultConfig"
			@end="endCallBack"
		/>
		<image class="lucky-mask" src="@/public/images/other/sg.png" mode="aspectFit" @tap.stop></image>
		<view class="lucky-btn flex-c" @tap.stop="startCallBack"></view>
		<view class="lucky-start" @tap.stop="startCallBack"></view>
		<view class="full-screen flex-c ac jc" v-if="award.show">
			<view class="lucky-toast flex-c">
				<view class="toast-icon flex-r ac jc" v-if="award.icon">
					<image class="icon-img" :src="award.icon" mode="aspectFit"></image>
				</view>
				<view class="toast-info flex-c ac">
					<text class="info-title">恭喜您中奖啦！</text>
					<view class="info-des flex-r">
						<text class="color-grey">获得</text><text class="color-blue">{{award.text}}</text>
					</view>
					<button class="info-btn" type="primary" @tap.stop="closeToast()">朕知道了</button>
				</view>
			</view>
			<image class="cancel" src="@/public/images/other/qx_x.png" mode="aspectFit" @tap.stop="closeToast()"></image>
		</view>
	</view>
</template>

<script>
	import LuckyWheel from '@lucky-canvas/uni/lucky-wheel'
	/**
	 * LuckyWheel 幸运转盘
	 * @description 我的每日幸运抽奖
	 * @property {String} width 转盘宽度
	 * @property {String} height 转盘高度
	 * @property {String} token 用户token，App必传
	 * @property {String} from = [web|ios|android] 访问来源
	 * @example <LuckyWheel :token="token" :from="from" :width="width" :height="height"></LuckyWheel>
	 */
	export default {
		name: "ch-LuckyWheel",
		props: {
			width: {
				type: String,
			},
			height: {
				type: String
			},
			token: {
				type: String
			},
			from: {
				type: String,
			}
		},
		data() {
			//计算缩放比例，适配宽屏
			let rpx = 1
			let windowInfo = uni.getWindowInfo()
			if(windowInfo.windowWidth >= 525){
				rpx = 525/750
			}else{
				rpx = windowInfo.windowWidth/750
			}
			return {
				showWheel: false, //显示转盘
				luckRules: [], //奖品规则
				award: { //奖励内容
					text: null,
					icon: null,
					show: false
				},
				drawNum: 0, //抽奖次数
				blocks: [{ //抽奖按钮
					padding: '0', 
					imgs: [{
						src: require("@/public/images/other/zp.png"),
						width: '100%',
						rotate: true
					}]
				}],
				prizes: [ //奖品列表
					{
						fonts: [
							{ text: '优惠券', top: '26%', fontSize: 26*rpx + 'px', fontColor: '#8900FF' },
						],
						imgs: [
							{
								src: require("@/public/images/other/yhq_128.png"),
								width: 64*rpx + 'px',
								top: '48%'
							}
						]
					},
					{
						fonts: [
							{ text: '成长值', top: '26%', fontSize: 26*rpx + 'px', fontColor: '#ffffff' },
						],
						imgs: [
							{
								src: require("@/public/images/other/czz_128.png"),
								width: 64*rpx + 'px',
								top: '48%'
							},
						]
					},
					{
						fonts: [
							{ text: '彩虹豆', top: '26%', fontSize: 26*rpx + 'px', fontColor: '#8900FF' },
						],
						imgs: [
							{
								src: require("@/public/images/other/chd_128.png"),
								width: 64*rpx + 'px',
								top: '48%'
							},
						]
					},
					{
						fonts: [
							{ text: '优惠券', top: '26%', fontSize: 26*rpx + 'px', fontColor: '#ffffff' },
						],
						imgs: [
							{
								src: require("@/public/images/other/yhq_128.png"),
								width: 64*rpx + 'px',
								top: '48%'
							}
						]
					},
					{
						fonts: [
							{ text: '成长值', top: '26%', fontSize: 26*rpx + 'px', fontColor: '#8900FF' },
						],
						imgs: [
							{
								src: require("@/public/images/other/czz_128.png"),
								width: 64*rpx + 'px',
								top: '48%'
							},
						]
					},
					{
						fonts: [
							{ text: '彩虹豆', top: '26%', fontSize: 26*rpx + 'px', fontColor: '#ffffff' },
						],
						imgs: [
							{
								src: require("@/public/images/other/chd_128.png"),
								width: 64*rpx + 'px',
								top: '48%'
							},
						]
					},
					{
						fonts: [
							{ text: '优惠券', top: '26%', fontSize: 26*rpx + 'px', fontColor: '#8900FF' },
						],
						imgs: [
							{
								src: require("@/public/images/other/yhq_128.png"),
								width: 64*rpx + 'px',
								top: '48%'
							}
						]
					},
					{
						fonts: [
							{ text: '成长值', top: '26%', fontSize: 26*rpx + 'px', fontColor: '#ffffff' },
						],
						imgs: [
							{
								src: require("@/public/images/other/czz_128.png"),
								width: 64*rpx + 'px',
								top: '48%'
							},
						]
					}
				],
				defaultConfig: { //其他配置
					stopRange: 0.7,
					offsetDegree: - 360 / 8 / 2
				}
			};
		},
		components: {
			LuckyWheel
		},
		updated() {
			console.log(this.token,this.$props,'$props')
		},
		mounted() {
			if(this.token){
				this.getLuckyRules()
			}else{
				this.showWheel = true
			}
		},
		methods: {
			//奖品规则
			getLuckyRules() {
				this.$http.get({
					url: '/api/appUser/queryAppRuleRows',
					data: {
						type: 'luckyzz'
					}
				}).then( (data) => {
					console.log(data);
					if(data.success && data.result){
						this.luckRules = data.result
						if(data.result.length == 8){
							//查询抽奖次数
							this.getDrawNum();
							data.result.forEach((prize, index)=>{
								this.prizes[index].fonts[0].text = prize.ruleTitle
								if(prize.awardType == 1){
									this.prizes[index].imgs[0].src = require("@/public/images/other/yhq_128.png")
								}else if(prize.awardType == 2){
									this.prizes[index].imgs[0].src = require("@/public/images/other/chd_128.png")
								}else if(prize.awardType == 3){
									this.prizes[index].imgs[0].src = require("@/public/images/other/czz_128.png")
								}
							})
							this.showWheel = true
							this.$forceUpdate()
							return
						}
					}
					throw new Error('no rule');
				}).catch((err) => {
					console.log(err);
					uni.showToast({
						title: '奖品数据加载失败，请刷新重试',
						icon: 'none'
					})
					this.showWheel = true
				})
			},
			getDrawNum() {
				this.$http.get({
					url: '/api/lucky/luckyDrawNum'
				}).then((data)=>{
					console.log(data);
					if(data.success && data.result){
						this.drawNum = data.result
					}else{
						this.drawNum = 0
					}
				})
			},
			// 点击抽奖按钮触发回调
			startCallBack () {
				//防止重复
				if(this.isDrawing){
					uni.showToast({
						title: '正在抽奖...',
						icon: 'none'
					})
					return false
				}
				//检查用户token
				if(!this.token){
					uni.showToast({
						title: '您还没有登录',
						icon: 'none'
					})
					return false
				}
				//检查奖品
				if(this.luckRules.length != 8){
					uni.showToast({
						title: '奖品数据加载失败，请刷新重试',
						icon: 'none'
					})
					return false
				}
				//检查抽奖次数
				if(this.drawNum < 1){
					uni.showToast({
						title: '今日抽奖次数已用完',
						icon: 'none'
					})
					return false
				}
				this.isDrawing = true
				// 随机位置
				this.defaultConfig.stopRange = (Math.floor(Math.random() * 8) + 1) / 10
				// 先开始旋转
				this.$refs.luckyWheel.play()
				// 请求接口
				this.$http.get({
					url: '/api/lucky/luckyDraw',
					data: {
						code: 'luckyzz'
					}
				}).then((data)=>{
					console.log(data);
					if(data.success && data.result){
						//立即更新剩余抽奖次数
						this.drawNum -= 1
						let index = this.luckRules.findIndex(item => item.id == data.result.id);
						// 调用stop停止旋转并传递中奖索引
						this.$refs.luckyWheel.stop(index)
						//更新中奖信息
						this.award.text = this.luckRules[index].ruleTitle
						if(this.luckRules[index].awardType == 1){
							this.award.text = this.luckRules[index].ruleTitle + '优惠券' + this.luckRules[index].awardValue + '张'
						}
						//确认剩余抽奖次数
						this.getDrawNum()
						//web端刷新用户信息
						if(this.from == 'web'){
							this.$store.dispatch('updateUserinfo');
						}
					}else{
						uni.showToast({
							title: data.message || '抽奖异常，请重试',
							icon: 'none'
						})
						this.$refs.luckyWheel.init()
					}
				}).catch((err)=>{
					console.log(err);
					uni.showToast({
						title: '抽奖异常，请重试',
						icon: 'none'
					})
					this.$refs.luckyWheel.init()
				})
			},
			// 抽奖结束触发回调
			endCallBack (prize) {
				//解除防重复
				this.isDrawing = false
				// 奖品详情
				console.log(prize)
				if(prize.fonts && prize.imgs && this.award.text){
					setTimeout(()=>{
						this.award.icon = prize.imgs[0].src
						this.award.show = true
						this.$forceUpdate()
					}, 500)
				}
			},
			// 关闭中奖提示
			closeToast() {
				this.award.text = null
				this.award.icon = null
				this.award.show = false
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="scss">
	.lucky-wheel{
		position: relative;
		box-sizing: border-box;
		padding-top: 36rpx;
		max-width: $max-width;
		margin: $pc-margin;
		width: 100%;
		height: 998rpx;
		justify-content: center;
	}
	.lucky-mask{
		position: absolute;
		top: 0;
		height: 998rpx;
		width: 100%;
	}
	.lucky-btn{
		margin-top: 237rpx;
		width: 140rpx;
		height: 178rpx;
		position: absolute;
		background-image: url('@/public/images/other/zz.png');
		background-position: center;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.lucky-start{
		width: 548rpx;
		height: 128rpx;
		position: absolute;
		top: 768rpx;
		background-image: url('@/public/images/other/ljcj.png');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	.full-screen{
		z-index: 997;
		touch-action: none;
		.lucky-toast{
			border-radius: 20rpx;
			.toast-icon{
				position: relative;
				width: 480rpx;
				height: 240rpx;
				background-image: url('@/public/images/other/bj.png');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: 100%;
				.icon-img{
					width: 128rpx;
					height: 128rpx;
				}
			}
			.toast-info{
				width: 480rpx;
				height: 320rpx;
				background: #FFFFFF;
				border-radius: 0 0 20rpx 20rpx;
				.info-title{
					margin-top: 40rpx;
					font-size: 36rpx;
					font-weight: 500;
					line-height: 36rpx;
				}
				.info-des{
					margin: 30rpx 0 40rpx;
					font-size: 28rpx;
					line-height: 28rpx;
				}
				.info-btn{
					width: 320rpx;
					height: 88rpx;
					background: #0055FF;
					border-radius: 44rpx;
					padding: 0;
					margin: 0;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 88rpx;
					box-sizing: border-box;
				}
			}
		}
		.cancel{
			width: 80rpx;
			height: 160rpx;
		}
	}
</style>